<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>竖向导航栏测试</title>
    <style type="text/css">
        #nav { width: 200px; /*设置菜单的宽度*/
		font-family: Arial; }
	#nav ul { list-style-type: none; /*不显示项目符号*/
		margin: 0px; /*外边距为0px*/
		padding: 0px; /*内边距为0px*/ }
	#nav li { border-bottom: 1px solid #ed9f9f; /*设置列表选项（菜单项）的下边框线*/ }
    #nav li a{ display:block;  /*区块显示*/
    padding:5px 5px 5px 0.5em;
    text-decoration:none;  /*链接无修饰*/
    border-left:12px solid #711515;  /*左边的粗红边框*/
    border-right:1px solid #711515;  /*右侧阴影*/ }
#nav li a:link, #nav li a:visited{  /*未访问过的链接、访问过的链接的样式*/
    background-color:#c11136;  /*改变背景色*/
    color:#fff;  /*改变文字颜色*/ }
#nav li a:hover{  /*鼠标悬停于菜单项上时的样式*/
    background-color:#990020;  /*改变背景色*/
    color:#ff0;  /*改变文字颜色*/ }

    </style>
</head>
<body>
    <div id="nav">
        <ul>
           <li><a href="#">首页</a></li>
           <li><a href="#">HTML</a></li>
           <li><a href="#">CSS</a></li>
           <li><a href="#">JavaScript</a></li>
           <li><a href="#">关于</a></li>
        </ul>
      </div>
  
</body>
</html>